import CodeBlock from "../../../component/CodeBlock";

function ReactRouter() {
  return (
    <div className="tab-pane">
      <h1>React Router</h1>
      <p>React Router 是 React 官方推荐的路由库，用于在单页应用程序中实现客户端路由。</p>

      <h2>安装</h2>
      <CodeBlock code={"> pnpm add react-router-dom"} />

      <h2>基本用法</h2>
      <h3>1. 创建路由配置</h3>
      <CodeBlock code={`import { createBrowserRouter } from "react-router-dom";
import Home from "../views/Home/Home";
import About from "../views/About/About";
import Contact from "../views/Contact/Contact";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About />,
  },
  {
    path: "/contact",
    element: <Contact />,
  },
]);

export default router;`} />

      <h3>2. 在应用中使用路由</h3>
      <CodeBlock code={`import { RouterProvider } from "react-router-dom";
import router from "./router";

function App() {
  return <RouterProvider router={router} />;
}

export default App;`} />

      <h3>3. 创建导航链接</h3>
      <CodeBlock code={`import { Link } from "react-router-dom";

function Navigation() {
  return (
    <nav>
      <Link to="/">首页</Link>
      <Link to="/about">关于我们</Link>
      <Link to="/contact">联系我们</Link>
    </nav>
  );
}`} />

      <h3>4. 获取当前路由信息</h3>
      <CodeBlock code={`import { useLocation, useNavigate, useParams } from "react-router-dom";

function UserProfile() {
  const location = useLocation();  // 当前位置信息
  const navigate = useNavigate();  // 导航功能
  const { id } = useParams();      // URL 参数

  // 获取当前路径
  console.log(location.pathname);
  
  // 编程式导航
  const goToHome = () => {
    navigate("/");
  };
  
  return (
    <div>
      <h2>用户 ID: {id}</h2>
      <button onClick={goToHome}>返回首页</button>
    </div>
  );
}`} />

      <h3>5. 嵌套路由</h3>
      <CodeBlock code={`import { createBrowserRouter, Outlet } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./views/Home";
import Dashboard from "./views/Dashboard";
import Settings from "./views/Settings";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "dashboard",
        element: <Dashboard />,
        children: [
          {
            path: "settings",
            element: <Settings />,
          },
        ],
      },
    ],
  },
]);

// Layout 组件
function Layout() {
  return (
    <div>
      <header>网站头部</header>
      <main>
        <Outlet />  {/* 子路由将在这里渲染 */}
      </main>
      <footer>网站底部</footer>
    </div>
  );
}`} />

      <h3>6. 路由懒加载</h3>
      <CodeBlock code={`import { createBrowserRouter } from "react-router-dom";
import { lazy, Suspense } from "react";

// 使用懒加载导入组件
const Home = lazy(() => import("./views/Home"));
const About = lazy(() => import("./views/About"));

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: (
      <Suspense fallback={<div>加载中...</div>}>
        <About />
      </Suspense>
    ),
  },
]);`} />
      <br />
      <h1>路由传参</h1>
      <h2>searchParams传参</h2>
      <CodeBlock code={
        `
  // 传参
  import { Navigate,useSearchParams } from 'react-router-dom'
  Navigate('/article?id=1001&name=jack')

  // 获取参数
  import { useSearchParams } from 'react-router-dom'
  const [paramsl=useSearchParams
  let id = params.get('id')
`
      }></CodeBlock>
      <br />
      <h2>params传参</h2>
      <CodeBlock code={
        `
// 路由配置
{ path: '/detail/:id/:name', component: Detail}

// 路由跳转
Navigate('/detail/2/zora')

// 获取参数
const params = useParams()
console.log(params) // {id: "2", name: "zora"}
`
      }></CodeBlock>
      <br />
      <h2>state传参</h2>
      <CodeBlock code={
        `
// 路由配置
{ path: '/detail', component: Detail },

import { useHistory,useLocation } from 'react-router-dom';
const history = useHistory();
const item = {id:1,name:"zora"}
// 路由跳转
history.push('/user/role/detail', { id: item });
// 参数获取
const {state} = useLocation()
console.log(state)  // {id:1,name:"zora"}
`
      }></CodeBlock>
    </div>
  );
}

export default ReactRouter;